<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="Content-language" content="zh-CN"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="applicable-device" content="pc">

    <title>寻车</title>
    <link href="/static/css/user/main.css" rel='stylesheet' type='text/css'/>
    <link href="/static/css/user/car/list.css" rel='stylesheet' type='text/css'/>
    <link href="/static/lib/layui/css/layui.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/user/common.css" rel='stylesheet' type='text/css'/>
    <link href="/static/lib/jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" type="text/css" />

</head>
<body>

<header th:replace="user/common :: header"></header>
<!-- NAV头部搜索模块 -->
<div class="searchs">
    <div class="wrapper">
        <div class="fl" log-mod="search">
            <div class="search-txt">
                <form class="clear" id="searchForm" action="#" method="get">
                    <div class="search-tab">
                        <i class="icon" data-bl="switch"></i>
                        <div data-bl="switch" class="check">关键词</div>
                        <div class="txt-search">
                            <input class="left txt" name="keywords" autocomplete="off"
                                   placeholder="如品牌、系列等" id="keyword-box"
                                   th:value="${searchBody.keywords != null} ? ${searchBody.keywords} : ''"/>
                        </div>
                    </div>
                    <button type="submit" class="act-search btn home-ico ico-search LOGCLICKEVTID">
                        搜索
                    </button>
                </form>
            </div>
        </div>
        <div class="fr last">
            <div class="ditu fr">
                <a th:href="@{/user/car/map(cityEnName=${searchBody.cityEnName})}" target="_blank">
                    <i></i>
                    地图找车
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 面包屑模块 -->
<div class="intro clear" mod-id="lj-common-bread">
    <div class="container">
        <div class="fl l-txt"><i class="icon"></i>&nbsp;<a href="/index">寻车</a><span
                class="stp">&nbsp;&gt;&nbsp;</span>[<a href="/user/car/list" title="选择城市">
            <span th:text="${currentCity.cnName}">城市</span></a>]找车
        </div>
        <div class="fr r-txt"></div>
    </div>
</div>

<div class="wrapper">
    <div class="filter-box">
        <div class="hd clear">
            <ul class="tab-lst">
                <li class="on"><a th:href="@{/user/car/list(cityEnName=${searchBody.cityEnName})}"><span>全部找车</span></a>
                </li>
            </ul>
            <div class="info"><span class="num">真实车源，假一赔亿！</span></div>
        </div>
        <div>
            <div class="bd" id="filter-options">
                <dl class="dl-lst clear">
                    <dt>区域：</dt>
                    <dd data-index="0">
                        <div class="option-list region-select">
                            <a data-bind="*" href="javascript:void(0);"
                               onclick="changeSimpleCondition('regionEnName', '*')">不限</a>
                            <tr th:each="region, regionStat: ${regions}">
                                <a th:attr="data-bind=${region.enName}" href="javascript:void(0);"
                                   th:onclick="'changeSimpleCondition(\'regionEnName\', \'' + ${region.enName} + '\')'"
                                   th:text="${region.cnName}"></a>
                            </tr>
                        </div>
                    </dd>
                </dl>
                <dl class="dl-lst clear">
                    <dt>品牌：</dt>
                    <dd data-index="1">
                        <div class="option-list brand-select">
                            <!--th:class="${searchBody.layout == 0} ? 'on' : ''"-->
                            <a data-bind="*" href="javascript:void(0);"
                               onclick="changeSimpleCondition('brandCode', '*')">不限</a>
                            <a data-bind="dz" href="javascript:void(0);"
                               onclick="changeSimpleCondition('brandCode', 'dz')">大众</a>
                            <a data-bind="ft" href="javascript:void(0);"
                               onclick="changeSimpleCondition('brandCode', 'ft')">福特</a>
                            <a data-bind="bk" href="javascript:void(0);"
                               onclick="changeSimpleCondition('brandCode', 'bk')">别克</a>
                            <a data-bind="bm" href="javascript:void(0);"
                               onclick="changeSimpleCondition('brandCode', 'bm')">宝马</a>
                            <a data-bind="bc" href="javascript:void(0);"
                               onclick="changeSimpleCondition('brandCode', 'bc')">奔驰</a>
                            <a data-bind="xfl" href="javascript:void(0);"
                               onclick="changeSimpleCondition('brandCode', 'xfl')">雪佛兰</a>
                            <a data-bind="ad" href="javascript:void(0);"
                               onclick="changeSimpleCondition('brandCode', 'ad')">奥迪</a>
                            <a data-bind="xd" href="javascript:void(0);"
                               onclick="changeSimpleCondition('brandCode', 'xd')">现代</a>
                            <a data-bind="bz" href="javascript:void(0);"
                               onclick="changeSimpleCondition('brandCode', 'bz')">标志</a>
                            <a data-bind="ca" href="javascript:void(0);"
                               onclick="changeSimpleCondition('brandCode', 'ca')">长安</a>
                            <a data-bind="rc" href="javascript:void(0);"
                               onclick="changeSimpleCondition('brandCode', 'rc')">日产</a>
                            <a data-bind="ft" href="javascript:void(0);"
                               onclick="changeSimpleCondition('brandCode', 'ft')">丰田</a>
                            <a data-bind="hf" href="javascript:void(0);"
                               onclick="changeSimpleCondition('brandCode', 'hf')">哈弗</a>
                            <a data-bind="bt" href="javascript:void(0);"
                               onclick="changeSimpleCondition('brandCode', 'bt')">本田</a>
                            <a data-bind="xtl" href="javascript:void(0);"
                               onclick="changeSimpleCondition('brandCode', 'xtl')">雪铁龙</a>
                        </div>
                    </dd>
                </dl>
                <dl class="dl-lst clear">
                    <dt>车系：</dt>
                    <dd data-index="2">
                        <div class="option-list series-select">
                            <!--th:class="${searchBody.layout == 0} ? 'on' : ''"-->
                            <a data-bind="*" href="javascript:void(0);"
                               onclick="changeSimpleCondition('seriesCode', '*')">不限</a>
                            <a data-bind="fks" href="javascript:void(0);"
                               onclick="changeSimpleCondition('seriesCode', 'fks')">福克斯</a>
                            <a data-bind="dz_POLO" href="javascript:void(0);"
                               onclick="changeSimpleCondition('seriesCode', 'dz_POLO')">大众POLO</a>
                            <a data-bind="bl" href="javascript:void(0);"
                               onclick="changeSimpleCondition('seriesCode', 'bl')">宝来</a>
                            <a data-bind="gef" href="javascript:void(0);"
                               onclick="changeSimpleCondition('seriesCode', 'gef')">高尔夫</a>
                            <a data-bind="st" href="javascript:void(0);"
                               onclick="changeSimpleCondition('seriesCode', 'st')">速腾</a>
                            <a data-bind="mt" href="javascript:void(0);"
                               onclick="changeSimpleCondition('seriesCode', 'mt')">迈腾</a>
                            <a data-bind="lx" href="javascript:void(0);"
                               onclick="changeSimpleCondition('seriesCode', 'lx')">朗讯</a>
                            <a data-bind="tg" href="javascript:void(0);"
                               onclick="changeSimpleCondition('seriesCode', 'tg')">途观</a>
                            <a data-bind="jd" href="javascript:void(0);"
                               onclick="changeSimpleCondition('seriesCode', 'jd')">捷达</a>
                            <a data-bind="hf_H6" href="javascript:void(0);"
                               onclick="changeSimpleCondition('seriesCode', 'hf_H6')">哈弗H6</a>
                            <a data-bind="yl" href="javascript:void(0);"
                               onclick="changeSimpleCondition('seriesCode', 'yl')">英朗</a>
                            <a data-bind="ky" href="javascript:void(0);"
                               onclick="changeSimpleCondition('seriesCode', 'ky')">凯越</a>
                            <a data-bind="klz" href="javascript:void(0);"
                               onclick="changeSimpleCondition('seriesCode', 'klz')">科鲁兹</a>
                        </div>
                    </dd>
                </dl>
                <dl class="dl-lst clear">
                    <dt>价格：</dt>
                    <dd data-index="3">
                        <div class="option-list price-select">
                            <a data-bind="*" href="javascript:void(0);"
                               onclick="changeSimpleCondition('priceBlock', '*')">不限
                            </a>
                            <tr th:each="priceBlock : ${priceBlocks}">
                                <a th:attr="data-bind=${priceBlock.key}" href="javascript:void(0);"
                                   th:onclick="'changeSimpleCondition(\'priceBlock\',\'' + ${priceBlock.key} + '\')'"
                                   th:text="${priceBlock.value.min < 0} ? (${priceBlock.value.max/10000} + '万元以下' ):
                                    (${priceBlock.value.max < 0} ? ${priceBlock.value.min/10000} + '万元以上' :
                                     ${priceBlock.value.min/10000} + '-' + ${priceBlock.value.max/10000} + '万元')">
                                </a>
                            </tr>
                        </div>
                    </dd>
                </dl>
            </div>
            <div class="filter-bar01">
                <div class="sort-bar" id="sort-bar">
                    <span>排序：</span>
                    <div class="sort-parent" data-bind="lastUpdateTime">
                        <a href="javascript:void(0);" onclick="changeSort('lastUpdateTime', 'desc')">
                            <span>默认</span>
                        </a>
                    </div>
                    <div class="sort-parent" data-bind="createTime">
                        <a href="javascript:void(0);" onclick="changeSort('createTime', 'desc')">
                            <span>最新</span>
                        </a>
                    </div>
                    <div class="sort-parent" data-bind="price">
                        <a href="javascript:void(0);" onclick="changeSort('price', 'asc')">
                            <span>价格低</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="main-box clear">
        <div id="sem_card"></div>
        <div class="con-box">
            <div class="list-head clear">
                <h2>共有<span th:text="${total}">18364</span>辆<span th:text="${currentCity.cnName}"></span>在售车源</h2>
                <div class="view-type" id="viewType">
                    <div class="modeshows modeshow">
                    <span class="l-show view-mod" data-type="real" id="lshow"><i></i>
                        <span th:text="${currentCity.cnName} + '车源'"></span>
                    </span>
                    </div>
                </div>
            </div>
            <div class="list-wrap">

                <ul id="house-lst" class="house-lst">
                    <tr th:each="car, carStat: ${cars}">
                        <li>
                            <div class="pic-panel">
                                <a th:href="'/user/car/detail/' + ${car.id}">
                                    <img th:src="${car.cover}" th:alt="${car.title}"/>
                                </a>
                            </div>
                            <div class="info-panel">
                                <div>
                                    <h2>
                                        <a th:href="'/user/car/detail/' + ${car.id}"
                                           th:title="${car.title}" th:text="${car.title}">

                                        </a>
                                    </h2>
                                </div>
                                <div class="col-1">
                                    <div class="where">
                                        <a th:href="@{/user/car/list(cityEnName=${searchBody.cityEnName}, search=${car.brand})}"
                                           class="laisuzhou">
                                            <span class="region" th:text="${car.brand} + '&nbsp;&nbsp;'"></span>
                                        </a>
                                        <span class="zone">
                                            <span th:text="${car.brand} + '-' + ${car.series} + '系列&nbsp;&nbsp;'"></span>
                                        </span>
                                        <span class="meters" th:text="${car.seats} + '座&nbsp;&nbsp;'"></span>
                                    </div>
                                    <div class="other">
                                        <div class="con">
                                            <span th:text="${car.mileage} + 'km'">
                                            </span>
                                            <span>/</span>
                                            <span th:text="${car.age} + '年'"></span>
                                        </div>
                                    </div>
                                    <div class="chanquan">
                                        <div class="left agency">
                                            <div class="view-label left">
                                                <!--<span th:if="${car.seats != null}">-->
                                                    <span class="fang-subway"></span>
                                                    <span class="fang-subway-ex">
                                                        <span>
                                                            <span th:text="'排量: ' + ${car.displacement} + 'L'"></span>
                                                            <span th:text="'车型: ' + ${car.styleMeaning}"></span>
                                                        </span>
                                                    </span>
                                                <!--</span>-->
                                                <span th:each="tag: ${car.tags}">
                                                    <span class="decoration"></span>
                                                    <span class="decoration-ex">
                                                        <span th:text="${tag.name}"></span>
                                                    </span>
                                                </span>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="price"><span class="num" th:text="${car.price}">价格</span>元
                                    </div>
                                    <div class="price-pre">
                                            <span th:text="${#dates.format(car.lastUpdateTime, 'yyyy.MM.dd')} + ' 更新'">
                                                更新时间
                                            </span>
                                    </div>
                                </div>
                                <div class="col-2">
                                    <div class="square">
                                        <div><span class="num" th:text="${car.watchTimes}">0</span>人</div>
                                        <div class="col-look">看过此车</div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </tr>
                </ul>
            </div>

            <div th:if="${!cars.isEmpty()}" id="pageable" class="page-box house-lst-page-box">
            </div>
            <div th:if="${cars.isEmpty()}" class="page-box house-lst-page-box">
                没有找到相关结果>_<，换个姿势去搜索相关数据吧~
            </div>
        </div>
    </div>
</div>
</div>
<!--<div th:include="user/common :: footer"></div>-->

<script type="text/javascript" src="/static/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/static/lib/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="/static/lib/layui/layui.js" type="text/javascript"></script>

<script th:inline="javascript" type="text/javascript">
    $('.xunwu-header .rent-page').addClass('on');

    var data = {};

    function locate_url(start, size) {
        var keywords = $('#keyword-box').val();
        if (typeof(keywords) !== 'undefined' && keywords !== null && keywords.length > 0) {
            data.keywords = keywords;
        }

        var target = '/user/car/list?cityEnName=' + [[${searchBody.cityEnName}]] + '&';
        $.each(data, function (key, value) {
            if(value && value!=='*'){
                target += (key + '=' + value + '&');
            }
        });
        target += 'start=' + start + '&size=' + size;
        return target;
    }

    function changeSimpleCondition(key, value) {
        switch (value) {
            case '*':
                delete data[key];
                break;
            default:
                data[key] = value;
        }
        window.location.href = locate_url(0, [[${searchBody.size}]]);
    }

    function changeSort(orderBy, direction) {
        data.orderBy = orderBy;
        data.orderDirection = direction;

        window.location.href = locate_url(0, [[${searchBody.size}]]);
    }

    var total = [[${total}]];
    var start = [[${searchBody.start}]];
    var size = [[${searchBody.size}]];
    if (size < 1) {
        size = 5;
    }

    $(function () {
        data.regionEnName = [[${searchBody.regionEnName}]];
        data.brandCode = [[${searchBody.brandCode}]];
        data.seriesCode = [[${searchBody.seriesCode}]];
        data.priceBlock = [[${searchBody.priceBlock}]];
        data.orderBy = [[${searchBody.orderBy}]];
        data.orderDirection = [[${searchBody.orderDirection}]];

        $('.region-select a[data-bind="' + [[${searchBody.regionEnName}]] + '"]').addClass('on');

        $('.brand-select a[data-bind="' + [[${searchBody.brandCode}]] + '"]').addClass('on');

        $('.series-select a[data-bind="' + [[${searchBody.seriesCode}]] + '"]').addClass('on');

        $('.price-select a[data-bind="' + [[${searchBody.priceBlock}]] + '"]').addClass('on');

        $('#sort-bar').find('div[data-bind="' + data.orderBy +  '"]').addClass('on');

        $('#searchForm').submit(function () {
            window.location.href = locate_url(start, size);
            return false;
        });

        $('#keyword-box').autocomplete({
            minLength: 2, // 最小字符数，默认1
            delay: 300, // 延迟加载300ms
            source: function (request, response) { // 数据源
                $.ajax({
                    url: '/rent/house/autocomplete?prefix=' + request.term,
                    success: function (res) {
                        if (res.code === 200) {
                            response(res.data);
                        }
                    }
                });
            },
            select: function (event, ui) { // 选中事件
                $('#keyword-box').text(ui.item.value);
                window.location.href = locate_url(start, size);
            }
        });

    });

//     layui.use('laypage', function () {
//         var laypage = layui.laypage;
//
//         //执行一个laypage实例
//         laypage.render({
//             elem: 'pageable', //注意，这里的 test1 是 ID，不用加 # 号
//             count: total, //数据总数，从服务端得到
//             limit: size,
//             curr: start / size + 1,
//             jump: function (obj, first) {
//                 //obj包含了当前分页的所有参数，比如：
// //                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
// //                console.log(obj.limit); //得到每页显示的条数
//
//                 //首次不执行
//                 if (!first) {
//                     window.location.href = locate_url((obj.curr - 1) * obj.limit, obj.limit);
//                 }
//             }
//         })
//     });
</script>
</body>
</html>
